<template>
	<view class="content" v-if="id">
		<view class="block">
			<view class="item" @click="itemClick">
				<view class="hint-option">
					<view class="number-left">订单编号:{{info.orderNum}}</view>
				</view>
				<view class="shop-info">
					<image :src="info.img" class="img"></image>
					<view class="right-option">
						<view class="txt-info">
							<view class="title">{{info.title}}</view>
							<view class="integral">¥{{info.price}}</view>
						</view>
						<view class="info-size">
							<view class="nums">数量:{{info.number}}</view>
							<view class="nums">下单时间:{{info.createAt}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submit">
			<view class="btn item" @click="submitClick()" v-if="info.status==3">
				确认核销
			</view>
			<view class="item item-one" @click="backClick" v-else>
				已经核销
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDetail: {},
				id: '',
				info:{},
				orderInfo:{},
			}
		},
		onLoad(e) {
			if (e) {
				this.id = e.orderId
				this.init()
			} 
			// this.orderDetail = uni.getStorageSync('orderDetail')
		},
		methods: {
			init() {
				this.$http('common.getOrderDetails', {
					id: this.id
				}).then(res => {
					if (res.status == 0) {
						console.log('res--code',res)
						this.info=res.data
					}
				})
			},
			backClick(){
				 uni.reLaunch({
				 	url:'/pages/index/index'
				 })
			},
			submitClick(){
				uni.showLoading({
					title:'核销中'
				})
				 this.$http('common.isExpress',{
				 	ids:this.id
				 }).then(res => {
					 uni.hideLoading()
				 	if (res.status == 0) {
				 		uni.showToast({
				 			icon:"none",
				 			title:"核销成功"
				 		})
						this.init()
				 	}else{
				 		uni.showToast({
				 			icon:"none",
				 			title:"核销失败"
				 		})
				 	}
				 })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 24rpx 24rpx;
	}

	.block {
		margin: 24rpx 0;
		background: #fff;
		border-radius: 16rpx;

		.item {
			padding: 36rpx 20rpx 28rpx 20rpx;

			.hint-option {
				display: flex;
				align-items: center;

				.number-left {
					flex: auto;
					font-size: 28rpx;
					font-weight: 400;
					color: #020B00;
				}

				.number-right {
					flex: none;
				}

				.no-pay {
					color: #D92628;
				}

				.other-status {
					color: #0089CF;
				}
			}

			.shop-info {

				margin-top: 36rpx;
				display: flex;
				// align-items: center;

				.img {
					width: 168rpx;
					height: 168rpx;
					flex: none;
					border-radius: 8rpx;
				}

				.right-option {
					margin-left: 18rpx;
					flex: auto;

					.txt-info {
						display: flex;
						align-items: center;

						.title {
							flex: auto;
							width: 314rpx;
							font-size: 30rpx;
							font-weight: bold;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.integral {
							flex: none;
							font-size: 28rpx;
							font-weight: 400;
							color: #020B00;
						}

					}

					.info-size {
						flex: auto;
						margin-top: 18rpx;
						display: flex;
						// align-items: center;
						flex-direction: column;

						.size {
							flex: auto;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
						}

						.nums {
							margin-top: 24rpx;
							flex: none;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
						}
					}
				}

			}

			.hint-info {
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 30rpx;
				padding-bottom: 24rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
				border-bottom: 1rpx solid #EFEFEF;

				.hint-txt {
					margin-right: 18rpx;
				}

				.hint-count {
					margin-left: 18rpx;
				}
			}

			.btn-option {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-top: 28rpx;

				.cancel-btn {
					width: 160rpx;
					height: 68rpx;
					line-height: 68rpx;
					text-align: center;
					border-radius: 542rpx 542rpx 542rpx 542rpx;
					opacity: 1;
					border: 2rpx solid #666666;
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
					margin-right: 20rpx;
				}

				.payBtn {
					width: 160rpx;
					height: 68rpx;
					line-height: 68rpx;
					text-align: center;
					border-radius: 542rpx 542rpx 542rpx 542rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
				}


			}


		}
	}

	.btn-look {
		margin-top: 60rpx;
		background: linear-gradient(153deg, #52AEE7 0%, #0089CF 63%);
		border-radius: 454rpx;
		line-height: 88rpx;
		height: 88rpx;
		text-align: center;
		color: #FFFFFF;
	}

	.code-block {
		margin-top: 82rpx;
		height: 630rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.hint-code {
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
			text-align: center;
			padding-top: 48rpx;
		}

		.code-option {
			position: relative;
			margin-top: 60rpx;
			width: 380rpx;
			height: 380rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.kuan {
			width: 380rpx;
			height: 380rpx;
		}

		.code {
			position: absolute;
			width: 304rpx;
			height: 304rpx;
		}

	}

	.submit {
		position: fixed;
		bottom: 44rpx;
		left: 24rpx;
		right: 24rpx;
		margin: 0 24rpx;
		z-index: 999;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.item {
			flex: 1;
			margin: 0 14rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
		}
		.item-one{
			color: #000;
			border: 1rpx solid #000;
			border-radius: 454rpx 454rpx 454rpx 454rpx;
		}
	}
</style>